<template>
  <PageMain>
    <template #header></template>
    <template #body>
      <div class="h-[calc(100vh-128px)] bg-white p-5 w-full">
        <div class="w-full h-full bg-white">
          <div class="p-5">
            <a-form :model="form" ref="formRef">
              <div class="w-full mb-5">
                <a-row justify="end">
                  <a-col :span="8">
                    <a-form-item field="code" label="资产编号">
                      <a-input v-model="form.code" placeholder="请输入资产编号" />
                    </a-form-item>
                  </a-col>
                  <a-col :span="2">
                    <a-form-item label="" label-col-flex="10px">
                      <a-button @click="handleFilterVisable">
                        <icon-filter />
                      </a-button>
                    </a-form-item>
                  </a-col>
                  <a-col :span="10" :offset="4">
                    <a-form-item label="" label-col-flex="80px">
                      <a-space size="medium">
                        <a-button @click="handleSearch" type="primary">查询</a-button>
                      </a-space>
                    </a-form-item>
                  </a-col>
                </a-row>
              </div>
              <div
                class="more-fliter-box w-full h-[80px] mt-5 mb-0 p-5 pl-[10px] pr-[10px] box-border bg-[#F7F9FC]"
                v-if="filterVisable"
              >
                <a-row class="w-full h-[40px] overflow-hidden" justify="start">
                  <a-col :span="6">
                    <a-form-item field="name" label="资产名称" label-col-flex="">
                      <a-input v-model="form.name" placeholder="请输入" />
                    </a-form-item>
                  </a-col>
                  <a-col :span="6">
                    <a-form-item field="name" label="摊销方式" label-col-flex="">
                      <a-input v-model="form.name" placeholder="请输入" />
                    </a-form-item>
                  </a-col>
                  <a-col :span="6">
                    <a-form-item field="created" label="" label-col-flex="">
                      <a-range-picker :style="{ width: '100%' }" v-model="form.dateRange">
                      </a-range-picker>
                    </a-form-item>
                  </a-col>
                  <a-col :span="2">
                    <a-link @click="handleReset">重置</a-link>
                  </a-col>
                </a-row>
              </div>
            </a-form>
          </div>
          <TableComponents :data-source="dataSource" :loading="showLoading" />
        </div>
      </div>
    </template>
  </PageMain>
</template>

<script lang="ts" setup>
import { getSubjectList } from '@/api/assetManagement/subject';
import PageMain from '@/components/PageBox.vue';
import { onMounted, reactive, ref, watch } from 'vue';
import { useRouter } from 'vue-router';
import TableComponents from './TableComponents.vue';
import type { TableData } from './types';
const router = useRouter();

const filterVisable = ref(false);
const formRef = ref();
const dataSource = reactive<TableData[]>([]);
const showLoading = ref(false);
const handleFilterVisable = () => {
  filterVisable.value = !filterVisable.value;
};
/**
 * @method 表单筛选元素
 */
const form = reactive({
  code: '',
  name: '',
  dateRange: []
});

let debounceTimer; // 用于存储定时器ID
const debounceDelay = 500; // 防抖延迟时间，单位为毫秒
watch(
  form,
  () => {
    clearTimeout(debounceTimer); // 清除之前的定时器
    debounceTimer = setTimeout(() => {
      fetchSubjectData();
    }, debounceDelay);
  },
  { deep: true }
);

const fetchSubjectData = async () => {
  showLoading.value = true;
  let created_end_time = '';
  let created_start_time = '';
  const { code, name, dateRange } = form;
  if (dateRange && dateRange.length) {
    created_start_time = dateRange[0];
    created_end_time = dateRange[1];
  }
  const params = {
    code,
    name,
    created_end_time,
    created_start_time
  };
  try {
    let { data } = (await getSubjectList(params)) as any;
    dataSource.splice(0, dataSource.length, ...data);
    showLoading.value = false;
  } catch {
    throw new Error('获取数据失败');
  }
};

const handleSearch = () => {
  fetchSubjectData();
};

const handleReset = () => {
  formRef.value.resetFields();
};

onMounted(() => {
  fetchSubjectData();
});
</script>
